/* 
 * 1. 全局 @mixin 需要放到这个文件，否则其他文件直接使用会报错未找到
 * 2. class 尽量不要写在这个文件内，最好在 App.vue 引用。 放在这里会在每个 wxss 内引入，增加了包体积
 */

// 颜色类
$color-primary-bg: #131828; // 背景颜色
$color-primary-modal-bg: #313954; // 模态框背景颜色
$color-primary-title: #edd2b2; // 标题颜色
$color-primary-text: #fefefe; // 默认文本字体
$color-primary-grey-text: #c8cee1; // 灰色字体
$color-primary-bg-text: #4b505e; // 背景颜色下的字
$color-primary-box: linear-gradient(-15deg, rgba(70, 78, 105, 0.99), rgba(32, 39, 61, 0.99)); // 容器盒子
$color-primary-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4); // 容器盒子阴影
$color-gold-bg: linear-gradient(180deg, #ffedcb, #f1c99a); // 金色按钮渐变
$color-base-white: rgb(221, 221, 221); // 适合本主题的字体颜色 - 非纯白

$imgBg: #3c425d; // 默认背景图颜色

$gold: #edd2b2;
$red: #e54d42;
$orange: #f37b1d;
$yellow: #fbbd08;
$olive: #8dc63f;
$green: #39b54a;
$cyan: #1cbbb4;
$blue: #0081ff;
$purple: #6739b6;
$mauve: #9c26b0;
$pink: #e03997;
$brown: #a5673f;
$grey: #8799a3;
$gray: #f0f0f0;
$black: #333333;
$white: #ffffff;

$redShadow: rgba(204, 69, 59, 0.2);
$orangeShadow: rgba(217, 109, 26, 0.2);
$yellowShadow: rgba(224, 170, 7, 0.2);
$blueShadow: rgba(0, 102, 204, 0.2);
$oliveShadow: rgba(124, 173, 55, 0.2);
$greenShadow: rgba(48, 156, 63, 0.2);
$cyanShadow: rgba(28, 187, 180, 0.2);
$purpleShadow: rgba(88, 48, 156, 0.2);
$mauveShadow: rgba(133, 33, 150, 0.2);
$pinkShadow: rgba(199, 50, 134, 0.2);
$brownShadow: rgba(140, 88, 53, 0.2);
$greyShadow: rgba(114, 130, 138, 0.2);
$blackShadow: rgba(26, 26, 26, 0.2);
$whiteShadow: rgba(26, 26, 26, 0.2);

// 自定义颜色常量
$color-border: #f4f4f4; // 边框颜色
$color-gray-bg: #f3f3f3; // 灰色背景
$color-gray-bg-font: #737373; // 灰色背景下的灰色字
$color-white-bg-font: #999999; // 白色背景下的灰色字
$color-dark-btn: #444444; // 接近黑色的按钮颜色
$color-dark: #070707; // 黑色字体
$color-mask: rgba(0, 0, 0, 0.5); // 蒙板
$box-shadow: 5px 5px 5px -4px rgba(126, 138, 155, 0.6);

// 自定义字体大小
$font-size-xxs: 24rpx;
$font-size-xs: 26rpx;
$font-size-sm: 28rpx;
$font-size-base: 32rpx;
$font-size-md: 34rpx;
$font-size-lg: 36rpx;
$font-size-xl: 38rpx;
$font-size-xxl: 44rpx;
$font-size-xxxl: 48rpx;

$tabBarHeight: 100rpx;
$rollingHeight: 35px;
$navBarHeight: 170rpx;
$navAndRoll: 240rpx;
$tabBarHeight: 100rpx;
$navigationBarHeight: 44px;

// 导出为变量，可供 JS 使用
:export {
  primaryGreyText: $color-primary-grey-text;
  tabBarHeight: $tabBarHeight;
  gold: $gold;
  red: $red;
  orange: $orange;
  yellow: $yellow;
  olive: $olive;
  green: $green;
  cyan: $cyan;
  blue: $blue;
  purple: $purple;
  mauve: $mauve;
  pink: $pink;
  brown: $brown;
  grey: $grey;
  gray: $gray;
  black: $black;
  white: $white;
  redShadow: $redShadow;
  orangeShadow: $orangeShadow;
  yellowShadow: $yellowShadow;
  blueShadow: $blueShadow;
  oliveShadow: $oliveShadow;
  greenShadow: $greenShadow;
  cyanShadow: $cyanShadow;
  purpleShadow: $purpleShadow;
  mauveShadow: $mauveShadow;
  pinkShadow: $pinkShadow;
  brownShadow: $brownShadow;
  greyShadow: $greyShadow;
  blackShadow: $blackShadow;
  whiteShadow: $whiteShadow;
}

// 颜色类
@mixin bg-primary {
  background-color: $color-primary !important;
  color: #ffffff !important;
}
@mixin bg-gold {
  background: $color-gold-bg;
  color: $color-primary-bg;
}
@mixin bg-gradual-red {
  background-image: linear-gradient(45deg, #f43f3b, #ec008c);
  color: #ffffff;
}
@mixin bg-gradual-orange {
  background-image: linear-gradient(45deg, #ff9700, #ed1c24);
  color: #ffffff;
}
@mixin bg-gradual-green {
  background-image: linear-gradient(45deg, #39b54a, #8dc63f);
  color: #ffffff;
}
@mixin bg-gradual-purple {
  background-image: linear-gradient(45deg, #9000ff, #5e00ff);
  color: #ffffff;
}
@mixin bg-gradual-pink {
  background-image: linear-gradient(45deg, #ec008c, #6739b6);
  color: #ffffff;
}
@mixin bg-gradual-blue {
  background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
  color: #ffffff;
}
@mixin bg-red {
  background-color: $red;
  color: #ffffff;
}
@mixin bg-orange {
  background-color: $orange;
  color: #ffffff;
}
@mixin bg-yellow {
  background-color: $yellow;
  color: #333333;
}
@mixin bg-olive {
  background-color: $olive;
  color: #ffffff;
}
@mixin bg-green {
  background-color: $green;
  color: #ffffff;
}
@mixin bg-cyan {
  background-color: $cyan;
  color: #ffffff;
}
@mixin bg-blue {
  background-color: $blue;
  color: #ffffff;
}
@mixin bg-purple {
  background-color: $purple;
  color: #ffffff;
}
@mixin bg-mauve {
  background-color: $mauve;
  color: #ffffff;
}
@mixin bg-pink {
  background-color: $pink;
  color: #ffffff;
}
@mixin bg-brown {
  background-color: $brown;
  color: #ffffff;
}
@mixin bg-grey {
  background-color: $grey;
  color: #ffffff;
}
@mixin bg-gray {
  background-color: $gray;
  color: #333333;
}
@mixin bg-black {
  background-color: $black;
  color: #ffffff;
}
@mixin bg-white {
  background-color: $white;
  color: #666666;
}
@mixin default-img {
  background: $imgBg;
  color: $color-primary-grey-text;
  border-radius: 5px;
}

@mixin is-flex($direction: row, $justify: flex-start, $align: stretch, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

$borderColor: #202437;
// $borderColor: #1a1f2d;
@mixin borderCreator($name: bottom, $color: $borderColor, $direction: bottom, $type: solid) {
  .border-#{$name} {
    @if $direction!= '' {
      border-#{$direction}: 1px $type $color;
    } @else {
      border: 1px $type $color;
    }
  }
}

@mixin border-bottom($color: #202437) {
  border-bottom: 1px solid $color;
}

@mixin border-top($color: #202437) {
  border-top: 1px solid $color;
}

// 苹果底部安全距离
@mixin safe-bottom-area($unit: padding-bottom) {
  box-sizing: content-box;
  #{$unit}: $tabBarHeight !important;
  #{$unit}: calc(100rpx + constant(safe-area-inset-bottom)) !important;
  #{$unit}: calc(100rpx + env(safe-area-inset-bottom)) !important;
}
